<template>
<!-- 节点过滤 -->
  <div class="hello">
    <el-form v-loading.fullscreen.lock="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.2)"
    element-loading-text="数据拼命加载中..." :model="dataForm" :rules="dataRule" ref="dataForm" label-width="160px">
      <el-form-item prop="parentName" label="地区：" class="menu-list" label-width="160px">
          <el-popover placement="bottom-start" trigger="click" style="width:100%;" v-model="menuListVisible">
            <el-tree style="" :data="menuList"
              :props="{ label: 'name', children: 'children' }"
              node-key="id" ref="menuListTree" :highlight-current="true"
              :expand-on-click-node="true" accordion
              :filter-node-method="filterNode"
              @current-change="menuListTreeCurrentChangeHandle">
            </el-tree>
            <template>
              <el-input slot="reference" v-model="dataForm.parentName" @input="filterChange" placeholder="地区">
                  <i slot="suffix" @click.stop="deptListTreeSetDefaultHandle()" class="el-icon-circle-close el-input__icon"></i>
              </el-input>
            </template>
          </el-popover>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fullscreenLoading: true,
      menuList: [],
      menuListVisible: false,
      dataForm: {
        parentName: ''
      }
    }
  },
  computed: {
    dataRule () {
      return {
        parentName: [
          { required: true, message: '地区不可为空', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    let city = [
        { name: '北京', enName: 'bj', children: [ { name: '朝阳区', enName: 'cyq', children: [] }, { name: '大兴区', enName: 'dxq', children: [] }, { name: '昌平区', enName: 'cpq', children: [] } ] },
        { name: '天津', enName: 'tj', children: [ { name: '南开区', enName: 'nkq', children: [] }, { name: '和平区', enName: 'hpq', children: [] }, { name: '西青区', enName: 'xqq', children: [] } ] }
    ]
    this.menuList = city
    this.fullscreenLoading = false
  },
  methods: {
    // 一级菜单搜索过滤
    filterChange () {
      this.$refs.menuListTree.filter(this.dataForm.parentName)
    },
    // 调用tree过滤方法 中文英过滤
    filterNode (value, data, node) {
      if (!value) {
        node.expanded = false
        return true
      }
      // 查询列表是否有匹配数据
      let val = value.toLowerCase()
      return this.checkBelongToChooseNode(val, data, node)
    },
    // 过滤父节点 子节点:如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。
    checkBelongToChooseNode (value, data, node) {
      if (data.name.indexOf(value) !== -1 || data.enName.indexOf(value) !== -1) {
        return true
      }
      const level = node.level
      // 如果传入的节点本身就是一级节点就不用校验了
      if (level === 1) {
        return false
      }
      // 先取当前节点的父节点
      let parentData = node.parent
      // 遍历当前节点的父节点
      let index = 0
      while (index < level - 1) {
        // 如果匹配到直接返回
        if (parentData.data.name.indexOf(value) !== -1 || parentData.data.enName.indexOf(value) !== -1) {
          return true
        }
        // 否则的话再往上一层做匹配
        parentData = parentData.parent
        index++
      }
      // 没匹配到返回false
      return false
    },
    // 上级菜单树, 设置默认值
    deptListTreeSetDefaultHandle () {
      this.dataForm.parentName = ''
    },
    // 选中
    menuListTreeCurrentChangeHandle (selectData) {
      if (selectData.children.length === 0) {
        this.dataForm.pid = selectData.id
        this.dataForm.parentName = selectData.name
        this.menuListVisible = false
      }
    }
  }
}
</script>